<template>
  <div>
    <el-dialog :visible="show" :title="id!=0?'修改用户':'添加用户'" width="43%" @close="closeFn(false)">
      <el-form :model="form" style="font-weight: 700" :inline="true" class="demo-form-inline">
        <el-form-item prop="nickName" label="用户昵称" :rules="[
          { required: true, message: '用户昵称不能为空', trigger: 'blur' }
        ]">
          <el-input v-model="form.nickName" placeholder="请输入用户昵称"></el-input>
        </el-form-item>
        <el-form-item label="归属部门">
          <el-select v-model="form.deptId" placeholder="请输入归属部门">
            <el-option :value="form.deptId" :label="label" style="height: auto">
              <el-tree :data="data"
                :props="defaultProps" :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form style="font-weight: 700" :inline="true" class="demo-form-inline">
        <el-form-item label="手机号码">
          <el-input v-model="form.phonenumber" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" placeholder="请输入用户邮箱"></el-input>
        </el-form-item>
      </el-form>
      <el-form v-show="editShow" :model="form" style="font-weight: 700" :inline="true" class="demo-form-inline">
        <el-form-item prop="userName" label="用户名称" :rules="[
          { required: true, message: '用户名称不能为空', trigger: 'blur' }
        ]">
          <el-input v-model="form.userName" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="用户密码" :rules="[
          { required: true, message: '用户密码不能为空', trigger: 'blur' }
        ]">
          <el-input v-model="form.password" type="password" suffix-icon="el-icon-view" placeholder="请输入用户密码"></el-input>
        </el-form-item>
      </el-form>
      <el-form style="font-weight: 700" :inline="true" class="demo-form-inline">
        <el-form-item label="用户性别">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option value="0" label="男"></el-option>
            <el-option value="1" label="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status" @change="showGroup(form.status)">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-form style="font-weight: 700" :inline="true" class="demo-form-inline">
        <el-form-item label="岗位">
          <el-select v-model="form.postIds" multiple placeholder="请输入归属部门">
            <el-option v-for="item in posts" :key="item.postId" :value="item.postId" :label="item.postName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.roleIds" multiple placeholder="请输入角色">
            <el-option v-for="item in roles" :key="item.roleId" :value="item.roleId" :label="item.roleName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form style="font-weight: 700" :inline="true" class="demo-form-inline">
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" style="width: 480px;" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary" @click="submitFm">确定</el-button>
        <el-button @click="closeFn(false)">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userAPI, addUserAPI, getEditUserAPI,editUserAPI } from "@/API/hbaip/api";

export default {
  props: ['show', 'data', 'id'],
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      label: '',
      form: {
        deptId: '',
        userName: '',
        nickName: '',
        password: '123456',
        phonenumber: '',
        status: '0',
        remark: '',
        sex: '',
        email: '',
        postIds: [],
        roleIds: [],
      },
      posts: [],
      sexValue: '',
      roles: [],
      editShow: true,
    }
  },
  watch: {
    id: function () {
      if (this.id != 0) {
        this.editShow = false
        this.getEditUserFn(this.id)
      }else{
        this.editShow = true
        this.form={
        deptId: '',
        userName: '',
        nickName: '',
        password: '123456',
        phonenumber: '',
        status: '0',
        remark: '',
        sex: '',
        email: '',
        postIds: [],
        roleIds: [],
      }
      }
    }
  },
  async created() {
    let res = await userAPI()
    this.posts = res.posts.map((item) => item)
    this.roles = res.roles.map((item) => item)
  },
  methods: {
    async getEditUserFn(id) {
      let res = await getEditUserAPI(id)
      Object.assign(this.form, res.data)
      this.form.postIds = res.postIds
      this.form.roleIds = res.roleIds
      this.label=res.data.dept.deptName
    },
    // 关闭窗口
    closeFn(val) {
      this.$emit('fn', val)
    },
    // 树状传值
    handleNodeClick(data) {
      this.form.deptId = data.id
      this.label = data.label
    },
    // 修改单选框
    showGroup(status) {
      this.form.status = status
      console.log(this.form.status);
    },
    // 添加
    addUserFn(){
      this.$confirm('是否添加用户', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await addUserAPI(this.form)
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.closeFn(true)
        } else {
          this.$message({
            type: 'error',
            message: '添加失败!'
          });
          this.closeFn(false)
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
        this.closeFn(false)
      });
    }, 
    // 修改
    editUserFn(){
      this.$confirm('是否修改用户', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await editUserAPI(this.form)
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.closeFn(true)
        } else {
          this.$message({
            type: 'error',
            message: '修改失败!'
          });
          this.closeFn(false)
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
        this.closeFn(false)
      });
    },
    // 确认
    submitFm() {
    if(this.id!=0){
      this.editUserFn()
    }else{
this.addUserFn()
    }
    }
  }
}

</script>

<style lang="less" scoped>
.demo-form-inline {
  display: flex;
  justify-content: space-between;

  /deep/ .el-input__inner {
    padding-right: 0;
  }
}

.btn {
  display: flex;
  justify-content: flex-end;
}
</style>